﻿@page "/tree-grid/search"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p> This sample demonstrates the Tree Grid searching feature. In this sample, use the search box from toolbar to search Tree Grid records.</p>
</SampleDescription>
<ActionDescription>
  <p>The Tree Grid has an option to search its content using the search method with search key as the parameter.</p>
  <p>The tree grid supports different types of search mode through the <code>TreeGridSearchSettings.HierarchyMode</code> property.</p>
  <p>The following are the types of search modes available in the tree grid.</p>
   <ul><li><code>Parent</code> - This is the default search hierarchy mode in the tree grid. It displays a searched record with its parent records. If the searched records do not have any parent record, it will display only the searched record.</li>
     <li><code>Child</code> - Displays the searched record with its child record.  If the searched records do not have any child record, it will display only the searched record.</li>
     <li><code>Both</code> - Displays the searched record with both its parent and child records. If the searched records do not have any parent and child records, it will display only the searched record.</li>
     <li><code>None</code> - Displays only the searched record.</li>
   </ul>
   <p>In this demo, The Tree Grid toolbar provides an option to search the Tree Grid's records. The user can type the text box in the toolbar and click search button or press Enter key to perform search operation.  And also, we have an option to change the searching hierarchy mode through property panel.</p>
   <p> More information can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/#searching/' > documentation</a> section.</p> 
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">

            <SfTreeGrid DataSource="TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" TreeColumnIndex="1" Height="315" Toolbar="@(new List<string>() { "Search" })">
                <TreeGridPageSettings PageSize="10"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="145"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=ColumnType.Date Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign="TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="100"></TreeGridColumn>

                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().Take(12).ToList();
    }
}
